<template>
	<div class="category-container" overflow: auto>
		<el-card shadow="hover" >
			<div class="system-menu-search mb15">
				<el-input size="small" v-model="searchValue" placeholder="请输入类目编号或名称" style="max-width: 180px">2313213 </el-input>
				<el-button size="small" type="primary" class="ml10"  @click="searchButton">
					<el-icon>
						<elementSearch />
					</el-icon>
					查询
				</el-button>
				<el-button size="small" type="success" class="ml10" @click="onOpenAddMenu">
					<el-icon>
						<elementFolderAdd />
					</el-icon>
					新增类目 
				</el-button>
			</div>
			<el-table  :data="menuTableData" style="width: 100%" row-key="path">
				<el-table-column label="类目编号"  show-overflow-tooltip  >
					<template #default="scope">
						<!-- <SvgIcon :name="scope.row.meta.icon" /> -->
						<!-- 添加图片 -->
						<!-- <span class="ml10">{{ $t(scope.row.meta.title) }}</span> -->
						<span class="ml10">{{ scope.row.categoryId }}</span>
					</template>
				</el-table-column>

				<el-table-column label="类目名称"  show-overflow-tooltip  >
					<template #default="scope">
						<!-- <SvgIcon :name="scope.row.meta.icon" /> -->
						<!-- 添加图片 -->
						<!-- <span class="ml10">{{ $t(scope.row.meta.title) }}</span> -->
						<span class="ml10">{{ scope.row.categoryName }}</span>
					</template>
				</el-table-column>

			 <el-table-column label="创建时间" show-overflow-tooltip >
				 <!-- {{formatDate(new Date(), "yyyy-MM-dd")}} -->
				<template #default="scope"> {{scope.row.createTime}}</template>
			
			</el-table-column>

				<el-table-column label="排序" show-overflow-tooltip >
					<template #default="scope">
						{{ scope.row.sort }}
					</template>
				</el-table-column>
				<el-table-column label="类型" show-overflow-tooltip >
					<template #default="scope">
						<el-tag type="success" size="small">{{ scope.row.xx }}商品类目</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" show-overflow-tooltip >
					<template #default="scope">
						<el-button size="mini" type="text" @click="onOpenAddMenu(scope.row)">新增商品</el-button>
						<el-button size="mini" type="text" @click="onOpenEditMenu(scope.row)">修改</el-button>
						<el-button size="mini" type="text" @click="onTabelRowDel(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<AddCategory ref="addCategoryRef" />
		<EditCategory ref="editCategoryRef" />
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, computed , onMounted,  onUnmounted, getCurrentInstance,} from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { useStore } from '/@/store/index';
import AddCategory from './component/addCategory.vue';
import EditCategory from './component/editCategory.vue';
import { toRaw } from '@vue/reactivity'
import { formatAxis, formatDate } from '/@/utils/formatTime';
import { Session } from '/@/utils/storage';
import {findlike, categoryUpdate, categoryList,deleteCategory} from '/@/api/product/category.ts';

// 测试数据
import { categoryData, searchCategoryData} from '../mock.ts';

export default {
	name: 'productCategory',
	components: { AddCategory, EditCategory },
	setup() {
		const { proxy } = getCurrentInstance() as any;

		const searchValue = ref('');
		const store = useStore();
		const addCategoryRef = ref();
		const editCategoryRef = ref();
		const state = reactive({
			//  menuTableData : categoryData
			 menuTableData : '',
		});

		// 获取用户信息 vuex
		const getUserInfos = computed(() => {
			return store.state.userInfos.userInfos;
		});
		console.log(getUserInfos);
		// 获取 vuex 中的路由
		// const menuTableData = computed(() => {
		// 	return store.state.routesList.routesList;
		// });

		// let menuTableData = categoryData;
		// let menuTableData = new Array();
		let keyvalue: any = true;
		// 打开新增菜单弹窗
		const onOpenAddMenu = () => {
			addCategoryRef.value.openDialog();
		};
		// 打开编辑菜单弹窗
		const onOpenEditMenu = (row: object) => {
			console.log("点击了编辑");
			// EditCategory.value.openDialog(row);
			editCategoryRef.value.openDialog(row);
		};
		// 删除当前行
		const onTabelRowDel = (row: any) => {
			console.log("删除的当前的行的信息");
			
			console.log(row)
			let curRow = toRaw(row);
			ElMessageBox.confirm(`此操作将永久删除：${curRow.catergoryName}, 是否继续?`, '提示', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					deleteCategory([row.categoryId]).then((res:any) => {
						ElMessage.success(`删除${row.categoryId}成功`);
						refreshCategoryData();
					}).catch((err:any) => {
					})
				})
				.catch(() => {});
		};

		// 刷新商品类目展示的数据
		const refreshCategoryData = ()=> {
			console.log('刷新数据');
			const cateData = initData();
			
			console.log(cateData);
			state.menuTableData = cateData;
		}

	

		

		// 子父组件之间通信 start
		onMounted(() => {
			refreshCategoryData();
            // 收到
            proxy.mittBus.on('refreshCategoryData', refreshCategoryData)
        })
        onUnmounted(()=>{
            // 离开时销毁
            proxy.mittBus.off("refreshCategoryData")
		})
		// 子父组件之间通信 end

		//查询值
		const searchButton = () => {
			// TODO 查询
			console.log('查询的编号或者类目: ' + searchValue.value);
			// menuTableData = searchCategoryData;
			// menuTableData.value = '';
			// ElMessage.info('查询: ' + searchValue.value);
			if(searchValue.value.length == 0) {
				refreshCategoryData();
				return;
			}
			findlike(searchValue.value).then((res:any)=>{
				state.menuTableData = res.data.categoryList;
				ElMessage.success('成功: ');
			})
		};

		// 初始化
		const initData = ()=> {
			// 获取本地的token
			let userInfo = Session.get('userInfo');
			console.log("商品类别商家信息：");
			console.log(userInfo)
			categoryList(userInfo.id).then((res:any)=>{
				console.log("初始化");
				state.menuTableData = res.data.categoryList;
				console.log(state.menuTableData);
				console.log(res);
				return res.categoryList;
			}).catch((err:any)=>{

			})
			return null;
		}

		return {
			initData,
			refreshCategoryData,
			searchButton,
			searchValue,
			addCategoryRef,
			editCategoryRef,
			onOpenAddMenu,
			onOpenEditMenu,
			onTabelRowDel,
			...toRefs(state),
		};
	},
};
</script>
